<template>
  <div class="main">
    <Category
      :show="newStatus != 0"
      :list1="list1"
      :list2="list2"
      :list3="list3"
      :fInfo="formInfo"
    ></Category>

    <el-card v-show="newStatus == 0">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addHandler"
        :disabled="!formInfo.category3Id"
      >
        添加</el-button
      >
      <el-table style="width: 100%" border :data="records">
        <el-table-column type="index" label="序号" width="100px" align="center">
        </el-table-column>
        <el-table-column prop="spuName" label="spu名称" width="width">
        </el-table-column>
        <el-table-column prop="description" label="spu描述" width="width">
        </el-table-column>
        <el-table-column prop="row" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="mini"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="addOrUpdateSpu(row.id)"
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-warning"
              size="mini"
              @click="showSku(row)"
            ></el-button>

            <el-popconfirm
              title="这是一段内容确定删除吗？"
              style="margin-left: 9px"
              @onConfirm="delSpu(row.id)"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="spuName"
        :visible.sync="dialogTableVisible"
        v-loading="loading"
      >
        <el-table
          style="width: 100%"
          border
          size="mini"
          :data="skuList"
          @before-close="closeHandler"
        >
          <el-table-column prop="skuName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="width">
          </el-table-column>
          <el-table-column prop="weight" label="重量" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="默认图片" width="width">
            <template slot-scope="{ row }">
              <img
                :src="row.skuDefaultImg"
                style="width: 100px; height: 120px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        align="center"
        :current-page="page"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="size"
        layout=" prev, pager, next, jumper,->,sizes,total "
        :total="total"
      >
      </el-pagination>
    </el-card>
    <Spuform v-show="newStatus == 1" ref="cate"></Spuform>
    <Skuform v-show="newStatus == 2" ref="sku"></Skuform>
  </div>
</template>

<script>
import cate from "@/utils/category";
import Skuform from "@/views/management/spu/skuform";
import Spuform from "@/views/management/spu/spuform";
export default {
  name: "Spu",
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
      formInfo: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
      page: 1,
      size: 5,
      total: 0,
      records: [],
      newStatus: 0,
      dialogTableVisible: false,
      spuName: "",
      skuList: [],
      loading: true,
    };
  },
  mounted() {
    this.$bus.$on("setNewStatus", this.setNewStatus);
  },
  mixins: [cate],
  methods: {
    async getSpuList() {
      let result = await this.$api.default.spu.getSpuList(
        this.page,
        this.size,
        this.formInfo.category3Id
      );
      if (result.code == 200) {
        this.total = result.data.total;
        this.records = result.data.records;
      }
    },
    hander3(category3Id) {
      this.formInfo.category3Id = category3Id;
      this.getSpuList();
    },
    handleSizeChange(size) {
      this.size = size;
      this.getSpuList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getSpuList();
    },
    //通过点击获取spu进行修改
    async addOrUpdateSpu(id) {
      let resData = await this.$api.default.spu.getSpuById(id);
      if (resData.code == 200) {
        this.$refs.cate.form = resData.data;
      }
      let resImg = await this.$api.default.spu.getSpuImgListById(
        resData.data.id
      );
      if (resImg.code == 200) {
        resImg.data.forEach((item) => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });
        this.$refs.cate.form.spuImageList = resImg.data || [];
        this.newStatus = 1;
      }
    },

    //设置newStatus的值
    setNewStatus(status) {
      this.newStatus = status;
      this.getSpuList();
    },

    //点击添加按钮
    addHandler() {
      this.newStatus = 1;
      this.$refs.cate.form.category3Id = this.formInfo.category3Id;
    },

    //删除spu
    async delSpu(id) {
      let result = await this.$api.default.spu.delSpuById(id);
      if (result.code == 200) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getSpuList();
      } else {
        this.$message({
          type: "danger",
          message: "删除失败!",
        });
      }
    },

    //添加sku
    addSku(row) {
      this.newStatus = 2;
      this.$refs.sku.getData(
        this.formInfo.category1Id,
        this.formInfo.category2Id,
        row
      );
    },

    //查看spu当前的sku列表
    async showSku(row) {
      this.spuName = row.spuName;
      this.dialogTableVisible = true;
      let result = await this.$api.default.sku.findBySpuId(row.id);
      if (result.code == 200) {
        this.skuList = result.data;
        this.loading = false;
      }
    },

    //关闭对话框前的操作
    closeHandler() {
      this.skuList = [];
      this.loading = true;
    },
  },
  components: {
    Skuform,
    Spuform,
  },
};
</script>

<style>
.main {
  padding: 20px;
}
.el-card {
  margin-top: 5px;
}
.el-table {
  margin-top: 5px;
}
</style>
